<template>
  <div class="article">
    <!-- 返回导航, 文章标题 -->
    <!--    <template v-if="article && article.original_status">-->
    <!--      <van-nav-bar-->
    <!--        :placeholder="true"-->
    <!--        :fixed="true"-->
    <!--        :title="article && article.original_status.title"-->
    <!--        left-text="返回"-->
    <!--        left-arrow-->
    <!--      />-->
    <!--      <div class="cell-header">-->
    <!--        <van-image-->
    <!--          width="30"-->
    <!--          height="30"-->
    <!--          :src="-->
    <!--            article.original_status.user.photo_domain +-->
    <!--            article.original_status.user.profile_image_url.split(',')[0]-->
    <!--          "-->
    <!--        />-->
    <!--        <div class="right-header">-->
    <!--          <div class="author">-->
    <!--            {{ article.original_status.user.screen_name }}-->
    <!--          </div>-->
    <!--          <div class="pubtime">{{ article.original_status.timeBefore }}</div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div-->
    <!--        class="content"-->
    <!--        v-html="article.original_status && article.original_status.text"-->
    <!--      ></div>-->
    <!--    </template>-->

    <template v-if="articleCache.original_status">
      <van-nav-bar
        :title="articleCache && articleCache.original_status.title"
        left-text="返回"
        left-arrow
        :fixed="true"
        :placeholder="true"
        @click-left="goBack"
      />
      <div class="cell-header">
        <van-image
          width="30"
          height="30"
          :src="
            articleCache.original_status.user.photo_domain +
            articleCache.original_status.user.profile_image_url.split(',')[0]
          "
        />
        <div class="right-header">
          <div class="author">
            {{ articleCache.original_status.user.screen_name }}
          </div>
          <div class="pubtime">
            {{ articleCache.original_status.timeBefore }}
          </div>
        </div>
      </div>
      <div
        class="content"
        v-html="
          articleCache.original_status && articleCache.original_status.text
        "
      ></div>
    </template>

    <!--    评论-->
    <div class="comments">
      <h5>评论</h5>
      <div class="comments-list">
        <div
          class="comment-item"
          v-for="(comment, index) in comments"
          :key="index"
        >
          <div class="cell-header">
            <van-image
              round
              width="30"
              height="30"
              :src="
                comment.user.photo_domain +
                comment.user.profile_image_url.split(',')[0]
              "
            ></van-image>
            <div class="right-header">
              <div class="author">{{ comment.user.screen_name }}</div>
            </div>
          </div>
          <p class="txt" v-html="comment.text"></p>
        </div>
      </div>
    </div>
    <div class="input-comment">
      <van-field
        v-model="commentValue"
        rows="2"
        autosize
        label="评论"
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
      ></van-field>
    </div>
    <div class="btn-comment">
      <van-button
        class="btn"
        type="info"
        block
        size="small"
        @click="commitComment"
        >提交评论</van-button
      >
    </div>
  </div>
</template>

<script>
import { NavBar, Image as VanImage, Toast, Field, Button } from "vant";
import { getArticleComments, postArticleComment } from "@/api";

export default {
  name: "Article",
  // 接收路由组件传递过来的参数
  props: ["idNum"],
  mounted() {
    this.getComments();
  },
  data() {
    return {
      articleCache: {},
      comments: [],
      commentValue: "",
    };
  },
  methods: {
    goBack() {
      // 当前路由后退一步
      this.$router.back();
    },
    async getComments() {
      let result = await getArticleComments({ id: this.$route.params.id });
      this.comments = result.comments;
      console.log(result);
      if (result.result === "ok") {
        Toast.success("评论成功");
      }
    },
    async commitComment() {
      if (this.$store.state.user && this.$store.state.user.token) {
        let result = await postArticleComment({
          id: this.$route.params.id,
          commentValue: this.commentValue,
        });
        console.log(result);
      } else {
        Toast.fail("尚未登录，请登录后评论");
        this.$router.push({ name: "login" });
      }
    },
  },
  watch: {
    $route: {
      handler() {
        // 拿到sessionStorage中的数据
        let result = JSON.parse(localStorage.getItem("articles"));
        // 给articleCache赋值
        this.articleCache = result[this.idNum];
      },
      immediate: true,
    },
  },
  components: {
    "van-nav-bar": NavBar,
    "van-image": VanImage,
    "van-field": Field,
    "van-button": Button,
  },
};
</script>

<style lang="less" scoped>
.cell-header {
  padding: 0.2rem;
  display: flex;
  height: 1rem;

  .right-header {
    font-size: 0.3rem;
    line-height: 0.4rem;
    padding-left: 0.2rem;

    .pubtime {
      color: #999;
    }
  }
}

.content {
  padding: 0 0.4rem 1.2rem;

  ::v-deep p {
    color: #666;
    font-size: 0.4rem;
  }

  ::v-deep img {
    max-width: 100%;
  }
}

.comment-item {
  background: #efefef;
  margin: 0.2rem;
  border-radius: 0.2rem;
}

.cell-header {
  display: flex;
  height: 1rem;
  align-items: center;

  .right-header {
    font-size: 0.3rem;
    line-height: 0.4rem;
    padding-left: 0.2rem;
  }
}

.txt {
  color: #666;
  font-size: 0.4rem;
  padding: 0 0.4rem 0.2rem;
  margin: 0;
}

.comments h5,
.btn-comment {
  margin: 0.2rem;
}

.btn {
  margin: 0.2rem 0;
}

.input-comment {
  margin: 0.2rem;
  border: 1px solid skyblue;
  border-radius: 0.2rem;
}
</style>
